<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Typescript Example - Performance Test - Lots Of Cells</title>
        <link
            href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&amp;display=swap"
            rel="stylesheet"
        />
    </head>
    <body>
        <div class="test-container" style="height: 100%; display: flex; flex-direction: column">
            <div>
                <button onclick="run()">Run grid</button>
                <button onclick="onSetData()">Set Data</button>
                <button onclick="onClearData()">Clear Data</button>
                <button onclick="onScroll()">Scroll</button>
                <span id="output">Time taken:</span>
            </div>
            <div id="myGrid" style="flex-grow: 1; height: 100vh"></div>
        </div>

        <script>
            let gridApi;

            function repeat(arr, n) {
                return Array(n).fill(arr).flat();
            }

            function onClearData() {
                gridApi.updateGridOptions({
                    columnDefs: [],
                    rowData: [],
                });
            }

            const cols = [
                { field: 'athlete' },
                { field: 'gold' },
                { field: 'silver' },
                { field: 'bronze' },
                { field: 'date' },
            ];

            const data = { athlete: 'Michael Phelps', date: '24/08/2008', gold: 8, silver: 0, bronze: 0 };

            const preAllocatedData = {
                init: {
                    columnDefs: repeat(cols, 4),
                    rowData: repeat(data, 300),
                },
                /*  lots: {
                    rowData: repeat(data, 100000), // 500_000
                    columnDefs: repeat(cols, 4), // 20
                },*/
            };

            function onSetData() {
                performance.mark('set-data-started');
                gridApi.updateGridOptions(preAllocatedData.init);
            }

            function onScroll() {
                const eBodyViewport = document.querySelector('.ag-body-viewport');
                const currScroll = eBodyViewport.scrollTop;
                eBodyViewport.scroll(0, currScroll + 5000);
            }

            function run() {
                const gridOptions = {
                    columnDefs: [],
                    rowData: [],
                    suppressColumnVirtualisation: true,
                    rowBuffer: 300,
                };
                const myGridElement = document.querySelector('#myGrid');
                gridApi = agGrid.createGrid(myGridElement, gridOptions);
                gridApi.addEventListener('displayedRowsChanged', () =>
                    performance.measure('set-data', 'set-data-started')
                );
            }
        </script>
    </body>
</html>
